import dayjs from "../../../libs/dayjs/dayjs.min.js";
var cuTabChooseDateMixin = {
	props: {
		defaultAppointCurrentDate: {
			type: Boolean,
			default: true, // 是否默认指定当前日期，如果需要外部调用appointDate，最好设置为false，否则可能会在初始化时调用两次 chooseItem 和 dateZoneChange 方法。
		},
		showLeftBox: {
			type: Boolean,
			default: true, // 是否显示左侧空间
		},
		useLeftSlot: {
			type: Boolean,
			default: false, // 是否使用左侧的 slot , 开启后，不显示左侧日期选择器
		},
		language: {
			type: String,
			default: "zh", // zh | en 控制显示星期的语言
			validator: function(n) {
				return ['zh', 'en'].includes(n);
			}
		},
		appendDistance: {
			type: Number,
			default: 3, // 触发追加数据的距离
		},
		maxPageDataLength: {
			type: Number,
			default: 25, // 最大列表长度，延迟在resize 中 重置列表
		}
	},
	data: function() {
		return {
			isAppendingData: false, // 是否正在追加数据

			pageDataList: [], // 周数据列表
			currentIndex: 0, // 当前 swiper index
			chooseItem: null, // 选中的日期

			badgeData: {}, // 徽章数据 eg: day-choose-tab {'2025-08-29': 1, '2025-09-11: 'test'}  key 为 yyyy-mm-dd 格式日期, value 为 String 及 Number | month-choose-tab {'2025-08': 1, '2025-09: 'test'}  key 为 yyyy-mm 格式日期, value 为 String 及 Number
		}
	},
	watch: {
		// 监听 currentIndex 变动
		currentIndex: function(n) {
			// 距左距右 三格 距离开始加载新数据
			if (n < this.appendDistance) {
				this.appendPageDataList('backward');
			} else if (n > this.pageDataList.length - this.appendDistance) {
				this.appendPageDataList('forward');
			}
		},
		/**
		 * 触发选择日期事件
		 * @param {Object} n - 选中的日期对象
		 */
		chooseItem: function(n) {
			this.triggerChooseItemChange();
		}
	},
	mounted: function() {
		if (this.defaultAppointCurrentDate) {
			let currentDate = new Date();
			this.appointDate(currentDate); // 默认指定当前日期
		}
	},
	methods: {
		/**
		 * 初始化列表数据
		 * @param {Date} date 
		 * need reload 需要重载方法
		 */
		initPageDataList(date) {

		},

		/**
		 * 设置选中数据
		 * @param {Date} date 
		 * need reload 需要重载方法
		 */
		setChooseItemByDate(date) {

		},

		/**
		 * 获取未来数据
		 * need reload 需要重载方法
		 */
		getForwarListData() {

		},

		/**
		 * 获取过去数据
		 * need reload 需要重载方法
		 */
		getBackwardListData() {

		},

		/**
		 * 触发选择项变更事件
		 * @event chooseItem
		 * @property {Object} chooseItem - 当前选择的数据项
		 */
		triggerChooseItemChange() {
			this.$emit("chooseItem", this.chooseItem);
		},

		/**
		 * 触发日期区间变更事件
		 * 将当前页面的日期区间数据通过事件传递给父组件
		 */
		triggerDateZoneChange() {
			this.$emit('dateZoneChange', this.pageDataList[this.currentIndex]);
		},

		/**
		 * 重置徽标数据
		 * @param {Object} badgeData - 需要设置的徽标数据对象
		 */
		resetBadgeData(badgeData) {
			this.badgeData = badgeData;
		},

		/**
		 * 指定日期
		 * @param {Date | String} date 指定要展示的日期
		 */
		appointDate(date) {
			if (!date) date = new Date();
			if (typeof date == 'string') date = dayjs(date).toDate();
			this.initPageDataList(date); // 根据日期初始化列表数据
			this.setChooseItemByDate(date); // 设置选中数据
			this.triggerDateZoneChange(); // 通知日期区域变动
		},

		/**
		 * 点击item
		 * @param {Object} e - 事件对象
		 * @param {Object} e.currentTarget.dataset - 事件目标数据集
		 * @param {Object} e.currentTarget.dataset.item - 当前点击的日期项数据
		 */
		tapItemAction(item) {
			this.setChooseItemByDate(dayjs(item.formatDateFull).toDate())
		},

		/**
		 * 处理日期选择器变化事件
		 * @param {Object} e - 事件对象
		 * @param {string} e.detail.value - 选择的日期值
		 */
		changeDatePicker(e) {
			const {
				value
			} = e.detail;
			this.appointDate(value); // 指定选中的日期
		},

		/**
		 * 处理swiper滑动切换事件
		 * @param {Object} e - 事件对象
		 * @param {string} e.detail.source - 事件来源，如'touch'表示触摸滑动
		 * @param {number} e.detail.current - 当前swiper索引
		 */
		swiperChangeAction(e) {
			const {
				source,
				current: currentIndex
			} = e.detail;
			if (source == 'touch') {
				this.currentIndex = currentIndex; // 更新当前索引
				this.triggerDateZoneChange();
			}
		},

		/**
		 * 轮播动画结束事件处理函数
		 * 在swiper滑动动画结束后触发，用于重新计算数据列表尺寸
		 */
		swiperAnimationFinishAction(e) {
			this.resizePageDataList();
		},


		/**
		 * 调整数据列表大小
		 * 当数据列表长度超过50时，重新初始化数据列表
		 * 使用当前选中的日期作为基准
		 */
		resizePageDataList() {
			if (this.pageDataList.length > this.maxPageDataLength) {
				let date = this.pageDataList[this.currentIndex][0].date;
				this.initPageDataList(date);
				this.triggerDateZoneChange();
			}
		},

		/**
		 * 追加weekList数据
		 * @param {String} appendDirection 追加数据方向
		 */
		appendPageDataList(appendDirection) {
			if (!appendDirection) return; // 无方向，停止操作
			if (this.isAppendingData) return; // 如果正在追加数据，停止操作
			this.isAppendingData = true;
			switch (appendDirection) {
				case 'forward':
					let forwardPageDataList = this.getForwarListData();
					this.pageDataList = [...this.pageDataList, ...
						forwardPageDataList
					]; // 更新weekList，因为列表向后追加，currentIndex 不变
					break;
				case "backward":
					let backwardPageDataList = this.getBackwardListData();
					this.pageDataList = [...backwardPageDataList, ...this.pageDataList]; // 更新weekList
					this.currentIndex = this.currentIndex + backwardPageDataList
						.length; // 因为列表向前追加，currentIndex + 增加的长度
					break;
				default:
					throw new Error('unknow append week list direction');
			}
			this.isAppendingData = false;
		}
	}
}

export default cuTabChooseDateMixin;